<!-- 考试台账 -->
<template>
  <div class="exam-container">
    <div class="flex-center">
      <px-form ref="formRef" :model="queryParams" :inline="true" class="custom-form-ui search-form">
        <px-form-item label="科室" prop="className">
          <px-select v-model="queryParams.className" style="width: 260px" placeholder="请选择科室" clearable>
            <px-option v-for="item in classNameList" :key="item.value" :label="item.name" :value="item.value" />
          </px-select>
        </px-form-item>
        <px-form-item label="考试类别" prop="examType">
          <px-select v-model="queryParams.examType" style="width: 260px" placeholder="请选择考试类别" clearable>
            <px-option v-for="item in examTypeList" :key="item.value" :label="item.name" :value="item.name" />
          </px-select>
        </px-form-item>
        <px-form-item label="考试名称" prop="examName">
          <px-input v-model="queryParams.examName" style="width: 260px" placeholder="请输入考试名称" clearable />
        </px-form-item>
        <div class="search-form-btn">
          <px-button type="primary" @click="handleQuery">查询</px-button>
          <px-button @click="resetQuery">重置</px-button>
          <px-button v-has="'ALL_EXAMMANAGE_EXAMLEDGER_EXPORT_BTN'" type="primary" plain @click="handleExport">导出</px-button>
        </div>
      </px-form>
    </div>
    <div v-loading="loading" class="table-content">
      <px-table height="calc(100vh - 360px)" :data="tableData" size="small" border class="common-table">
        <px-table-column type="index" label="序号" fixed width="55" align="center" />
        <px-table-column prop="examName" label="考试名称" min-width="120" show-overflow-tooltip />
        <px-table-column prop="examCategoryId" label="考试类别" min-width="120" show-overflow-tooltip />
        <px-table-column prop="departmentName" label="科室" min-width="120" show-overflow-tooltip />
        <px-table-column prop="publishType" label="状态" min-width="120" show-overflow-tooltip>
          <template #default="scope">
            <span v-if="scope.row.publishType === null" />
            <div v-else :class="[scope.row.publishType === 'P' ? 'published-status' : 'unPublished-status']">
              <span :class="['status-point', scope.row.publishType === 'P' ? 'published-status-point' : 'unPublished-status-point']" />
              <span class="status-span">{{ scope.row.publishType === "P" ? "已发布" : "未发布" }}</span>
            </div>
          </template>
        </px-table-column>
        <px-table-column prop="publishTime" label="发布时间" min-width="120" show-overflow-tooltip />
        <px-table-column prop="updateTime" label="更新时间" min-width="120" show-overflow-tooltip />
        <px-table-column prop="updateByName" label="操作人" min-width="120" show-overflow-tooltip />
        <px-table-column label="操作" width="100" fixed="right" align="center">
          <template #default="scope">
            <px-tooltip content="明细" placement="top">
              <px-button v-has="'ALL_EXAMMANAGE_EXAMLEDGER_DETAIL'" link type="primary" @click="handleDetail(scope.row)">
                <DetailIcon />
              </px-button>
            </px-tooltip>
            <px-tooltip content="总览" placement="top">
              <px-button v-has="'ALL_EXAMMANAGE_EXAMLEDGER_OVERVIEW'" link type="primary" @click="handleOverView(scope.row)">
                <OverviewIcon />
              </px-button>
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="pageNum"
        v-model:limit="pageSize"
        class="table-pagination"
        :total="total"
        @pagination="handleQuery"
      />
    </div>

    <!-- 明细 -->
    <div v-if="detailVisible">
      <Details v-model:visible="detailVisible" :classNameList="classNameList" :rowData="rowData" :examTypeList="examTypeList" />
    </div>
    <!-- 总览 -->
    <div v-if="overViewVisible">
      <OverView v-model:visible="overViewVisible" :rowData="rowData" />
    </div>
  </div>
</template>

<script setup>
import { queryCurrentClassList, queryDictData } from "@/api/common";
import { getExamLedgerListAPI } from "@/api/knowledge/examManage";
import DetailIcon from "@/assets/svg/knowledge/detail.svg?component";
import OverviewIcon from "@/assets/svg/knowledge/overview.svg?component";
import { onMounted, reactive, ref, toRefs, getCurrentInstance } from "vue";
import Details from "./component/details.vue";
import OverView from "./component/overView.vue";

defineOptions({
  name: "ALL_EXAMMANAGE_EXAMLEDGER"
});

const { proxy } = getCurrentInstance();

const formRef = ref();

const state = reactive({
  loading: false,
  queryParams: {
    className: "",
    examType: "",
    examName: ""
  },
  classNameList: [],
  examTypeList: [],
  tableData: [],
  pageNum: 1,
  pageSize: 20,
  total: 10,
  detailVisible: false,
  overViewVisible: false,
  rowData: {}
});
const { loading, queryParams, classNameList, examTypeList, tableData, pageNum, pageSize, total, detailVisible, overViewVisible, rowData } =
  toRefs(state);

onMounted(() => {
  getClassNameSelect();
  getExamTypeList();
  handleQuery();
});

// 获取科室下拉框数据
const getClassNameSelect = async () => {
  const classNameData = await queryCurrentClassList();
  state.classNameList = [...classNameData];
};

// 获取考试类别下拉框数据
const getExamTypeList = async () => {
  // const params = {
  //   size: 9999,
  //   current: 1,
  //   name: ""
  // };
  // const res = await getQuestionCategoryListAPI(params);
  // state.examTypeList = res.records.map(item => {
  //   return {
  //     name: item.name,
  //     value: item.categoryId
  //   };
  // });
  const typeData = await queryDictData({ typeCode: "EXAM_TYPE" });
  state.examTypeList = [...typeData];
};

// 查询
const handleQuery = async () => {
  try {
    state.loading = true;
    const params = {
      pageNum: state.pageNum,
      pageSize: state.pageSize,
      categoryId: state.queryParams.examType,
      department: state.queryParams.className,
      examName: state.queryParams.examName
    };
    const res = await getExamLedgerListAPI(params);
    state.tableData = res.data;
    state.total = res.total;
  } catch (error) {
    console.log(error);
  } finally {
    state.loading = false;
  }
};

// 重置
const resetQuery = () => {
  formRef.value.resetFields();
  handleQuery();
};

// 导出
const handleExport = () => {
  const { twoCode, name, status } = state.queryParams;
  const params = {
    categoryId: state.queryParams.examType,
    department: state.queryParams.className,
    examName: state.queryParams.examName
  };
  proxy.download("post", "/dms/api/v1/exam/exportData", params, "考试台账.xlsx");
};

// 明细
const handleDetail = row => {
  state.rowData = row;
  state.detailVisible = true;
};

// 总览
const handleOverView = row => {
  state.rowData = row;
  state.overViewVisible = true;
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/knowledge/examManage/scss/common.scss");
</style>
